<template>
  <div class="editor" ref="dom"></div>
</template>

<script setup>
import { onMounted, defineProps, defineEmits, ref, watch } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import CodeStore from '../store/index.js'
import monacoEditor from './config/editorConfig.js'
let instance
const dom = ref()
const useCodeStore = CodeStore()
const props = defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
const compileWhiteList = ['javascript', 'html', 'css', 'json']
onMounted(() => {
  const languageModel = monacoEditor.createModel(
    props.modelValue,
    useCodeStore.Currentlanguages
  )
  //创建语言模型
  instance = monacoEditor.create(dom.value, {
    model: languageModel,
    tabSize: 2,
    automaticLayout: true,
    scrollBeyondLastLine: false,
    autoClosingTags: true,
    autoClosingBrackets: true,
    minimap: {
      enabled: true
    },
    folding: true,
    lineNumbers: 'on',
    lineNumbersMinChars: 3,
    lineDecorationsWidth: 10,
    foldingStrategy: 'indentation', //代码折叠
    smoothScrolling: true, // 平滑滚动
    formatOnType: true, // 输入时自动格式化
    formatOnPaste: true, // 粘贴时自动格式化
    suggestOnTriggerCharacters: true, // 启用代码补全
    quickSuggestions: { other: true, comments: true, strings: true }, // 快速建议
    hover: { enabled: true }, // 启用悬停提示
    codeLens: true, // 启用代码透镜功能
    errorSquiggles: true, // 语法检查错误下划线
    inlineSuggest: true, // 内联建议
    multiCursorModifier: 'ctrlCmd', // 多光标快捷键（在 Windows 使用 Ctrl，在 Mac 使用 Cmd）
    fontLigatures: true, // 启用字体连字
    showFoldingControls: 'always', // 折叠控制始终显示
    foldingHighlight: true, // 折叠代码高亮
    bracketPairColorization: { enabled: true }, // 启用括号配对高亮
    language: useCodeStore.Currentlanguages // 根据项目的语言调整,
  })
  instance.onDidChangeModelContent((target) => {
    //使用防抖函数若用户在一段时间内没有进行输入则发起代码执行请求
    useCodeStore.codeContent = instance.getModel().getValue()
    codeCompile(instance.getModel().getValue())
  })
  // 添加自定义右键菜单项
  instance.addAction({
    id: 'save-file', // 动作 ID，需唯一
    label: 'Save File', // 菜单显示的名称
    contextMenuGroupId: 'navigation', // 菜单组，可自定义
    contextMenuOrder: 1, // 菜单显示的顺序
    run: function (editor) {
      // 运行该操作的代码，例如自动保存逻辑
      console.log('File saved!')
      // 可加入保存逻辑，如将编辑内容保存到本地或服务器
    }
  })
  //代码格式化
  instance.addAction({
    id: 'format-document',
    label: 'Format Document',
    contextMenuGroupId: '2_modification',
    contextMenuOrder: 2,
    run: function (editor) {
      editor.getAction('editor.action.formatDocument').run()
    }
  })
  //配置copy
  instance.addAction({
    id: 'custom-copy',
    label: 'Custom Copy',
    contextMenuGroupId: '9_cutcopypaste',
    contextMenuOrder: 1,
    run: function (editor) {
      const selectedText = editor
        .getModel()
        .getValueInRange(editor.getSelection())
      navigator.clipboard.writeText(selectedText).then(() => {
        console.log('Text copied to clipboard!')
      })
    }
  })
  //配置run
  // 添加自定义右键菜单项
  instance.addAction({
    id: 'run-file', // 动作 ID，需唯一
    label: 'Run', // 菜单显示的名称
    contextMenuGroupId: 'navigation', // 菜单组，可自定义
    contextMenuOrder: 1, // 菜单显示的顺序
    run: function (editor) {
      // 自定义代码保存操作
      const content = editor.getValue() // 获取当前编辑器内容
      localStorage.setItem('fileContent', content)
      alert('请点击running 提交')
    }
  })
  //模型语言发生改变的hooks
  //监听语言变化创建对应worker
  watch(
    () => useCodeStore.Currentlanguages,
    (newVal) => {
      // 获取当前模型
      const model = instance.getModel()
      // 创建新的语言模型
      const newModel = monacoEditor.createModel(model.getValue(), newVal)
      // 设置新的模型语言
      monacoEditor.setModelLanguage(newModel, newVal)
      // 更新编辑器的模型
      instance.setModel(newModel)
    },
    {
      immediate: true
    }
  )
})
//执行代码检测
const codeCompile = useDebounceFn((code) => {
  if (compileWhiteList.includes(useCodeStore.Currentlanguages)) {
    return false
  }
  useCodeStore.codeCompile(code)
}, 3000)
</script>

<style scoped>
.editor {
  height: 330px;
}
</style>
